<template>
  <div>
    <van-nav-bar
      :title="title"
      left-text="返回"
      right-text="历史"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
      class="navbar"
    />
    <div class="detail-container" v-if="bet && bet.betting_bull_bear">
      <div class="icon-right">
        <van-icon name="share" size="25px" class="icon"/>
        <van-icon name="plus" size="25px" class="icon2"/>
      </div>
      <div :class="this.positiveNum?'positivenum':'num'">
        <div class="rate" >{{bet.last_ticker.close.toFixed(2)}}</div>
        <div class="num1">{{bet.last_ticker.change.toFixed(2)}}</div>
        <div class="percent">{{bet.last_ticker.percentage.toFixed(2)}}%</div>
        <div class="label">{{bet.period_type_display}}</div>
      </div>
      <div class="pic">
        <div class="pic-top">
          <!--------左边-------->
          <div>
            <span class="">猜涨赔率</span>
            <span class="uprate">{{betBullish}}</span>
          </div>
          <!--------右边---------->
          <div>
            <span class="downrate">{{betBearish}}</span>
            <span class="">猜跌赔率</span>
          </div>
        </div>
        <div>
          <van-slider :value="progress" active-color="#3CB371" inactive-color="#FF0000" bar-height="15px"
                      :max="100" :min="0" >
            <div slot="button" />
          </van-slider>
        </div>
        <div class="pic-top">
          <!--------左边-------->
          <div>
            <span class="">猜涨</span>
            <span class="uprate">{{betBullTotal}}
              {{bet.pay_asset.symbol}}</span>
          </div>
          <!--------右边---------->
          <div>
            <span class="downrate">{{betBearTotal}}
              {{bet.pay_asset.symbol}}</span>
            <span class="">猜跌</span>
          </div>
        </div>
      </div>
      <van-tag color="#ffe1e1" text-color="#ad0000">
        温馨提示：当前竞猜标的为{{bet.bet_asset.symbol}}在{{bet.betting_bull_bear.period}}的走势.</van-tag>
      <div>
        <div class="button-left">
          <van-button type="primary" @click="showPopup" size="large">猜涨</van-button>
        </div>
        <div class="button-right">
          <van-button type="danger" @click="showPopupdown" size="large">猜跌</van-button>
        </div>
      </div>
    </div>
<!--    <van-button type="primary" v-on:click="onSubmit">确认</van-button>-->
    <!--------弹出层！！！------>
    <van-popup v-model="show" position="bottom" :style="{ height: '70%' }"
               v-if="bet && bet.betting_bull_bear" @click-overlay="clickOverlay">
      <div class="pop" v-if="bet">
        <div class="pop-top">
          <span class="up">涨</span>
          <span class="title">{{bet.bet_asset.symbol}} {{bet.betting_bull_bear.period.substring(0,10)}}</span>
          <span class="symbol">{{bet.pay_asset.symbol}}</span>
        </div>
        <div class="pop-container">
          <div class="pop-form">
            <div class="title">金额</div>
            <div class="num">
              {{bet.betting_bull_bear.bull_total}} <span class="des">{{bet.pay_asset.symbol}}</span>
              {{bet.betting_bull_bear.bear_total}} <span class="des2">{{bet.pay_asset.symbol}}</span>
            </div>
          </div>
          <div class="pop-form">
            <div class="title">赔率</div>
            <div class="downrate">
              {{bet.betting_bull_bear.bullish.toFixed(3)}}
              <!--<img src="../../../assets/images/home/downarrow.png" style="height: 12px;width: 10px">-->
              <span>(实时)</span>
            </div>
          </div>
          <div class="pop-form">
            <div class="title">区间</div>
            <div class="num">{{bet.betting_bull_bear.period.substring(10)}}</div>
          </div>
          <div class="pop-form">
            <div class="title">数量</div>
            <div class="num"><van-stepper v-model="value" input-width="40px" button-size="32px"/></div>
          </div>
          <div class="pop-form2">
            <div class="title">支付</div>
            <div class="num">{{totalAmount}} <span>{{bet.pay_asset.symbol}}</span></div>
          </div>
          <div class="tips">温馨提示：当前竞猜标的为{{bet.bet_asset.symbol}}在{{bet.betting_bull_bear.period}}的走势.</div>
          <div><van-button type="primary" round size="large" v-on:click="onSubmit">确认</van-button></div>
        </div>
      </div>
    </van-popup>
    <!--------弹出层2！！！------>
    <van-popup v-model="showdown" position="bottom" :style="{ height: '70%' }"
               v-if="bet && bet.betting_bull_bear" @click-overlay="clickOverlay">
      <div class="pop" v-if="bet">
        <div class="pop-top">
          <span class="down">跌</span>
          <span class="title">{{bet.bet_asset.symbol}} {{bet.betting_bull_bear.period.substring(0,10)}}</span>
          <span class="symbol">{{bet.pay_asset.symbol}}</span>
        </div>
        <div class="pop-container">
          <div class="pop-form">
            <div class="title">金额</div>
            <div class="num">
              {{bet.betting_bull_bear.bull_total}} <span class="des">{{bet.pay_asset.symbol}}</span>
              {{bet.betting_bull_bear.bear_total}} <span class="des2">{{bet.pay_asset.symbol}}</span>
            </div>
          </div>
          <div class="pop-form">
            <div class="title">赔率</div>
            <div class="downrate">
              {{bet.betting_bull_bear.bearish.toFixed(3)}}
              <!--<img src="../../../assets/images/home/downarrow.png" style="height: 12px;width: 10px">-->
              <span>(实时)</span>
            </div>
          </div>
          <div class="pop-form">
            <div class="title">区间</div>
            <div class="num">{{bet.betting_bull_bear.period.substring(10)}}</div>
          </div>
          <div class="pop-form">
            <div class="title">数量</div>
            <div class="num"><van-stepper v-model="value" input-width="40px" button-size="32px"/></div>
          </div>
          <div class="pop-form2">
            <div class="title">支付</div>
            <div class="num"> {{ totalAmount }} <span>{{bet.pay_asset.symbol}}</span></div>
          </div>
          <div class="tips">温馨提示：当前竞猜标的为{{bet.bet_asset.symbol}}在{{bet.betting_bull_bear.period}}的走势.</div>
          <div><van-button type="primary" round size="large" v-on:click="onSubmitdown">确认</van-button></div>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { Toast, NavBar, Button, Icon, Tag, Progress, Popup, Panel, Stepper, Slider } from 'vant'
var msgpack = require('msgpack-lite')
const uuidv4 = require('uuid/v4')

export default {
  name: 'bet',
  components: {
    [Stepper.name]: Stepper,
    [Panel.name]: Panel,
    [Popup.name]: Popup,
    [Progress.name]: Progress,
    [Tag.name]: Tag,
    [Icon.name]: Icon,
    [NavBar.name]: NavBar,
    [Button.name]: Button,
    [Slider.name]: Slider
  },
  data () {
    return {
      betId: null,
      bet: null,
      value: 1,
      show: false,
      showdown: false
    }
  },
  mounted () {
  },
  async activated () {
    this.betId = this.$route.params.betId
    console.log('betsId:!!' + this.betId)
    await this.getBet(this.betId)
    // 设置定时器，每隔2秒获取数据
    let timer = await setInterval(() => {
      this.getBet(this.betId)
    }, 2000)
    // 在离开页面时清楚定时器
    this.$once('hook:deactivated', () => {
      clearInterval(timer)
    })
  },
  computed: {
    title () {
      if (this.bet == null) {
        return ''
      } else {
        if (this.bet.bet_asset !== null) {
          return this.bet.bet_asset.symbol
        } else {
          return ''
        }
      }
    },
    totalAmount () {
      return this.value * this.bet.quantity_per_hand
    },
    positiveNum () {
      if (this.bet !== null) {
        let change = this.bet.last_ticker.change
        return change > 0
      } else {
        return false
      }
    },
    progress () {
      if (this.bet !== null) {
        console.log(this.bet.betting_bull_bear.bull_total)
        console.log(this.bet.betting_bull_bear.bear_total)
        if (this.bet.betting_bull_bear.bull_total === 0 && this.bet.betting_bull_bear.bear_total === 0) {
          return 50
        } else if (this.bet.betting_bull_bear.bear_total !== 0 && this.bet.betting_bull_bear.bull_total === 0) {
          return 0
        } else if (this.bet.betting_bull_bear.bull_total !== 0 && this.bet.betting_bull_bear.bear_total === 0) {
          return 100
        } else {
          return parseInt(100 * this.bet.betting_bull_bear.bull_total /
            (this.bet.betting_bull_bear.bear_total + this.bet.betting_bull_bear.bull_total))
        }
      } else {
        return 50
      }
    },
    // 猜涨赔率
    betBullish () {
      if (this.bet !== null) {
        if (this.bet.betting_bull_bear.bullish !== null) {
          return this.bet.betting_bull_bear.bullish.toFixed(3)
        } else return 0.000
      } else return 0.000
    },
    // 猜跌赔率
    betBearish () {
      if (this.bet !== null) {
        if (this.bet.betting_bull_bear.bearish !== null) {
          return this.bet.betting_bull_bear.bearish.toFixed(3)
        } else return 0.000
      } else return 0.000
    },
    // 猜涨
    betBullTotal () {
      if (this.bet !== null) {
        if (this.bet.betting_bull_bear.bull_total !== null) {
          return this.bet.betting_bull_bear.bull_total.toFixed(3)
        } else return 0.000
      } else return 0.000
    },
    // 猜跌 CNB
    betBearTotal () {
      if (this.bet !== null) {
        if (this.bet.betting_bull_bear.bear_total !== null) {
          return this.bet.betting_bull_bear.bear_total.toFixed(3)
        } else return 0.000
      } else return 0.000
    }
  },
  methods: {
    async getBet (id) {
      const { data } = await this.$api.bet.betDetail(id)
      console.log(data)
      if (data.code === 200) {
        this.bet = data.data
        console.log('总资产' + this.bet.bet_asset.price_usd)
        if (typeof this.bet.bet_asset.price_usd === 'undefined') {
          this.bet.bet_asset.price_usd = 0
        }
      } else {
        Toast('获取数据失败，请刷新')
      }
    },
    getPayUrl (betDirection, betId, amount, assetId) {
      // {'service': 'bet', 'bet_direction': 0, 'bet_id': 1}
      // const amount = '0.01'
      // const asset_id = 'f8127159-e473-389d-8e0c-9ac5a4dc8cc6'
      // EOS_ASSET_ID = "f8127159-e473-389d-8e0c-9ac5a4dc8cc6"
      const obj = { service: 'bet', bet_direction: betDirection, bet_id: betId }
      console.log(msgpack.encode(obj).toString('base64'))
      const memo = msgpack.encode(obj).toString('base64')
      const trace = uuidv4()
      const recipient = '18329f2e-7c5c-42b9-8d2c-5bf78064fe01'
      return `https://mixin.one/pay?recipient=${recipient}&asset=${assetId}&amount=${amount}&trace=${trace}&memo=${memo}`
      // window.href = payUrl 打开付款链接
    },
    clickOverlay () {
      this.value = 1
    },
    onSubmit () {
      this.show = false
      const url = this.getPayUrl(1, this.bet.id, this.totalAmount, this.bet.pay_asset.asset_id)
      window.location.href = url
      this.value = 1
    },
    onSubmitdown () {
      this.showdown = false
      const url = this.getPayUrl(2, this.bet.id, this.totalAmount, this.bet.pay_asset.asset_id)
      console.log(url)
      window.location.href = url
      this.value = 1
    },
    onClickLeft () {
      this.$router.go(-1)
    },
    onClickRight () {
      if (this.bet !== null) {
        this.$router.push({ name: 'odds_history', params: { 'id': this.bet.id } })
      }
    },
    showPopup () {
      this.show = true
    },
    showPopupdown () {
      this.showdown = true
    }
  }
}
</script>

<style scoped lang="less">
  *{
    font-size: 15px;
  }
  .navbar{
    color: #ffa700;
  }
  .pop{
    font-size: 16px;
    padding: 15px;
    .pop-top{
      padding-bottom: 15px;
      border-bottom: solid #e5e5e5 2px;
      .up{
        color: white;
        background-color: mediumseagreen;
        padding: 4px;
        font-size: 10px;
        border-radius: 50px;
        margin-right: 10px;
      }
      .down{
        color: white;
        background-color: red;
        padding: 4px;
        font-size: 10px;
        border-radius: 50px;
        margin-right: 10px;
      }
      .title{
        font-size: 18px;
        margin: 5px 5px 0;
      }
      .symbol{
        font-size: 12px;
        color: #ffa700;
        background-color: #80808014;
        padding: 1px 2px;
      }
    }
    .pop-container{
      margin: 10px 0;
      .pop-form{
        padding: 17px 0;
        display: flex;
        justify-content: space-between;
        border-bottom: solid #e5e5e5 1px;
        .title{
          color: darkgrey;
        }
        .num{
          color: black;
          .des{
            color: darkgrey;
            padding-right: 5px;
            border-right: solid mediumseagreen 10px;
            margin-right: 10px;
          }
          .des2{
            color: darkgrey;
            padding-right: 5px;
            border-right: solid red 10px;
          }
        }
        .downrate{
          color: red;
          span{
            color: darkgrey;
          }
        }
      }
      .pop-form2{
        .pop-form();
        background-color: #ffa7001f;
        padding: 17px 5px;
        border: solid #ffa70059 0.02rem;
        .title{
          color: darkgrey;
        }
        .num{
          color: black;
          span{
            color: darkgrey;
          }
        }
      }
      .tips{
        padding: 17px 0;
        color: darkgrey;
        font-size: 14px;
      }
      .van-button--primary {
        background-color: #ffa7009c;
        color: black;
      }
    }
  }
.detail-container{
  padding: 20px;
  .icon-right{
    /*float: right;*/
    height: 30px;
    .icon{
      float: right;
    }
    .icon2{
      float: right;
      margin-right: 30px;
    }
  }
  .num{
    display: flex;
    color: red;
    font-weight: 600;
    margin-bottom: 10px;
    .rate{
      font-size: 35px;

    }
    .num1{
      font-size: 15px;
      padding: 18px 5px 0;
    }
    .percent{
      font-size: 15px;
      padding: 18px 5px 0 0;
    }
    .label{
      font-size: 12px;
      margin-top: 20px;
      padding: 1px 3px;
      color: white;
      background-color: #05a2b2;
    }
  }
  .positivenum{
    display: flex;
    color: green;
    font-weight: 600;
    margin-bottom: 10px;
    .rate{
      font-size: 35px;

    }
    .num1{
      font-size: 15px;
      padding: 18px 5px 0;
    }
    .percent{
      font-size: 15px;
      padding: 18px 5px 0 0;
    }
    .label{
      font-size: 12px;
      margin-top: 20px;
      padding: 1px 3px;
      color: white;
      background-color: #05a2b2;
    }
  }
  .pic{
    .pic-top{
      display: flex;
      justify-content: space-between;
      color: gray;
      font-size: 14px;
      margin: 8px 0;
      .uprate{
        color: mediumseagreen;
        padding-left: 5px;
        font-weight: 600;
      }
      .downrate{
        color: red;
        padding-right: 5px;
        font-weight: 600;
      }
    }
  }
  .try{
    height: 800px;
  }
  .button-left{
    position: fixed;
    bottom: 0;
    left: 0;
    right: 50%;
  }
  .button-right{
    position: fixed;
    bottom: 0;
    left: 50%;
    right: 0;
  }
}
</style>
